import React, { useState } from 'react';
import { Layout, theme } from 'antd';
import AppHeader from "@/components/appHeader/AppHeader";
import AppNav from '@/components/appNav/AppNav';
import { Outlet } from 'react-router-dom';

const { Header, Sider, Content } = Layout;

const Home = () => {
  const [collapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout style={{width: '100%', height: '100%'}}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <AppNav></AppNav>
      </Sider>

      {/* 右边 */}
      <Layout>
        {/* 头部 */}
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <AppHeader></AppHeader>
        </Header>

        {/* 内容 */}
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            flex: 1,
            overflow: 'auto' // 添加滚动条
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>

    </Layout>
  );
};
export default Home;    